<template>
	<xn-form-container
		:title="'审批流程'"
		:width="900"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
		:bodyStylePadding="1"
	>
		<div class="flowStatusImg">
			<img :src="fsImg" style="width: 120px" />
		</div>
		<a-card
			style="width: 100%"
			:bordered="false"
			:tab-list="tabListNoTitle"
			:active-tab-key="noTitleKey"
			@tabChange="(key) => onTabChange(key, 'noTitleKey')"
		>
			<p v-if="noTitleKey === 'form'">
				<formDetail :data="formData" />
			</p>
			<p v-else-if="noTitleKey === 'flowImg'">
				<flowImg :data="formData" />
			</p>
			<p v-else-if="noTitleKey === 'flowRecord'">
				<flowRecord :data="formData" />
			</p>
		</a-card>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="doneDetail">
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { required } from '@/utils/formRules'
	import flowJobApi from '@/api/flow/flowJobApi'
	import formDetail from '../work/todoTask/detail/formDetail.vue'
	import flowRecord from '../work/todoTask/detail/flowRecord.vue'
	import flowImg from '../work/todoTask/detail/flowImg.vue'
	// 抽屉状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	// 表单数据
	const formData = ref({})
	const submitLoading = ref(false)
	const statusOptions = ref([])
	const key = ref('form')
	const noTitleKey = ref('form')
	const tabListNoTitle = [
		{
			key: 'form',
			tab: '表单'
		},
		{
			key: 'flowImg',
			tab: '流程图'
		},
		{
			key: 'flowRecord',
			tab: '流转记录'
		}
	]
	const handleRef = ref()
	const fsImg = ref('')

	// 打开抽屉
	const onHandle = (record) => {
		visible.value = true
		if (record) {
			let recordData = cloneDeep(record)
			formData.value = Object.assign({}, recordData)
			fsImg.value = tool.flowStatusImg(formData.value.status)
		}
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		submitLoading.value = false
	}

	const cancelHandle = () => {
		submitLoading.value = false
	}

	const onTabChange = (value, type) => {
		if (type === 'key') {
			key.value = value
		} else if (type === 'noTitleKey') {
			noTitleKey.value = value
		}
	}
	// 抛出函数
	defineExpose({
		onHandle
	})
</script>
<style scoped>
	.flowStatusImg {
		position: absolute;
		z-index: 20;
		right: 50px;
		top: 20px;
	}
</style>
